<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼接新闻列表内容</title>
    <style>
        h1 {
            text-align: center;
        }
        table {
            text-align: center;
            margin: auto;
        }
    </style>
</head>
<body>
    <h1>新闻列表</h1>
    <table id="newsTable" border="1 " width="800">
        <thead>
            <tr>
                <td>序号</td>
                <td>新闻标题</td>
                <td>新闻内容</td>
            </tr>
        </thead>

        <!-- 将newsList1、newsList2、newsList3中的数据，拼接成表格内容，并插入到tbody中 -->
        <tbody>

        </tbody>
    </table>

    <script type="text/javascript">
            const newsList1 = [
                { title : '新闻1', content: '新闻1内容' },
                { title : '新闻2', content: '新闻2内容' }
            ]

            const newsList2 = [
                { title : '新闻3', content: '新闻3内容' },
                { title : '新闻4', content: '新闻4内容' }
            ]

            const newsList3 = [
                { title : '新闻5', content: '新闻5内容' },
                { title : '新闻6', content: '新闻6内容' }
            ]

            // T0D0合并数组并拼接内容
            const news = [...newsList1, ...newsList2, ...newsList3]

            // 获取id为newsTable的元素，并获取其tbody子元素
            const newsTabe = document.getElementById('newsTable').getElementsByTagName('tbody')[0];

            // 遍历news数组中的每一个元素
            news.forEach((item, index) => {
                // 在newsTabe表格中插入一行
                const row = newsTabe.insertRow();
                // 在新插入的行中插入第一个单元格，并设置其内容为索引加1
                row.insertCell().innerText = index + 1;
                // 在新插入的行中插入第二个单元格，并设置其内容为元素的title属性
                row.insertCell().innerText = item.title;
                // 在新插入的行中插入第三个单元格，并设置其内容为元素的content属性
                row.insertCell().innerText = item.content;
            })
    </script>
</body>
</html>